Skip to main content

2-dars. CSS asoslari

Darsning maqsadlari:​

  1. CSS nima ekanligini, uning vazifalari va sintaksisini tushunish.
  2. Selektorlar va ularning ishlatilishini o‘rganish.
  3. Box modelini o‘rganish.
  4. Background va Box Shadow bilan ishlash.
  5. Pozitsiyalash va z-index haqida bilish.
  6. Transition (o‘tishlar) va Animations (animatsiyalar) bilan ishlash.
  7. Flexbox tizimini o‘rganish va uning asosiy tushunchalarini tushunish.
  8. Flexbox va CSS Grid o‘rtasidagi farqlarni aniqlash.
  9. CSS Grid tizimini o‘rganish.
  10. CSS ni responsive qilish (mobil moslashuvchanlik).

https://www.youtube.com/watch?v=KPPhQ0F-SDY&list=PLpDyZ4xZcDg_gyII__1jtnE2FEgqpfJU8&pp=iAQB

Kirish​

Bugun biz CSS (Cascading Style Sheets) haqida gaplashamiz. CSS HTML bilan birga ishlaydi va saytingizni naqshlaydi, shaklini beradi, va uni vizual ravishda jozibali qiladi. HTML, ayniqsa sahifaning tarkibini tashkil etadi, lekin CSS esa sahifaning dizaynini, ranglarini, o‘lchamlarini va tartibini belgilaydi. CSS ni o‘rganish orqali sahifalaringizni jozibador va o‘qish uchun qulay qilish imkoniga ega bo‘lasiz.

CSS Nima?​

CSS, ya'ni Cascading Style Sheets — bu veb-sahifalarning tashqi ko‘rinishini o‘zgartirish uchun ishlatiladigan til. CSS yordamida biz sahifamizga ranglar, o‘lchamlar, fontlar, oraliqlar, va boshqa ko‘plab dizayn elementlarini qo‘shishimiz mumkin.

HTML: Sahifada joylashgan ma'lumotlar.

CSS: Sahifaning ko‘rinishi va dizayni.

Masalan:​

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>CSS Asoslari</title>
    <style>
		    h1 {
				    color: red;
		    }
    </style>
</head>
<body>
    <h1>CSS bilan tanishish</h1>
    <p>CSS — veb dizaynini bezash uchun ishlatiladi.</p>
</body>
</html>

Bu yerda HTML kod sahifaning tarkibini, h1 va p taglarini yaratadi, lekin ularning ko‘rinishi CSS yordamida boshqariladi.

CSS Sintaksisi​

CSS da uchta asosiy qism mavjud:

  1. Selektor — bu biz qaysi elementga uslub berishni xohlayotganimizni ko‘rsatadi.
  2. Xususiyat — bu uslubni o‘rnatish uchun ishlatiladigan xususiyat (masalan, rang, o‘lcham).
  3. Qiymat — xususiyatning aniq qiymati (masalan, rang uchun "red", o‘lcham uchun "20px").

Misol:​

h1 {
    color: blue;
    font-size: 30px;
}

Bu yerda:

  • h1 — selektor. Bu h1 elementiga taalluqli.
  • color — xususiyat. Bu matnning rangini belgilaydi.
  • blue — qiymat. Matnning rangi ko‘k bo‘ladi.

CSS Selektorlar​

CSS selektorlari HTML elementlarini tanlash uchun ishlatiladi. Ular yordamida biz sahifadagi ma'lum elementlarga uslub berishimiz mumkin.

Asosiy CSS selektorlar:​

  • Element selektori: HTML elementiga uslub berish.

    p {
        color: green;
    }

    Bu yerda barcha <p> (paragraf) elementlarining matni yashil bo‘ladi.

  • Id selektori: Id atributiga ega bo‘lgan elementga uslub berish.

    #header {
        background-color: lightgray;
    }

    Bu yerda id="header" bo‘lgan elementning fon rangi och kulrang bo‘ladi.

  • Class selektori: Class atributiga ega bo‘lgan elementlarga uslub berish.

    .button {
        background-color: red;
        color: white;
    }

    Bu yerda class="button" bo‘lgan barcha elementlarning foni qizil, matni esa oq bo‘ladi.

CSS Xususiyatlari va Ularning Amaliy Qo‘llanilishi​

CSS xususiyatlari juda ko‘p va har biri turli dizayn elementlarini boshqaradi. Keling, ba'zi muhim CSS xususiyatlarini ko‘rib chiqaylik.

Ranglar​

Ranglarni berishning turli usullari mavjud:

  • Rang nomi: red, blue, green.
  • Hex qiymatlari: #FF0000 (qizil), #0000FF (ko‘k).
  • RGB: rgb(255, 0, 0) (qizil), rgb(0, 0, 255) (ko‘k).
h1 {
    color: red;
    background-color: #0000FF;
}

O‘lchamlar​

Matn o‘lchamlarini va boshqa elementlar o‘lchamlarini belgilash mumkin:

h1 {
    font-size: 40px;
}

Bu yerda h1 elementining matni 40 piksel bo‘ladi.

Oraliqlar​

Elementlar o‘rtasidagi bo‘shliqni sozlash uchun ishlatiladi:

  • margin: Elementni tashqi oraliq.
  • padding: Elementning ichki oraliq.
div {
    margin: 20px;
    padding: 10px;
}

Bu yerda div elementining tashqi oraliqi 20px, ichki oraliqi esa 10px bo‘ladi.

Misollar​

Misol 1: Oddiy veb sahifa​

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>CSS Asoslari</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS bilan tanishish</h1>
    <p>CSS orqali sahifamizni bezaymiz!</p>
</body>
</html>
h1 {
    color: blue;
    text-align: center;
}
p {
    color: green;
    font-size: 18px;
}

Bu yerda:

  • h1 matni ko‘k va markazda joylashgan.
  • p matni yashil va o‘lchami 18px.

CSS Box Modeli​

Box Model CSS ning eng muhim tushunchalaridan biri bo‘lib, u har bir HTML elementini "katta quti" sifatida tasavvur qiladi. Har bir elementning o‘zining tashqi va ichki joylashuvi mavjud. CSS Box modelini tushunish orqali biz elementlarni sahifada to‘g‘ri joylashtirishni o‘rganamiz.

Box Modelning tarkibi:​

  1. Content (Mazmun): Elementning ichki qismini tashkil etadi. Bu yerda matn yoki rasm bo‘lishi mumkin.
  2. Padding (Ichki oraliq): Mazmun va chegara o‘rtasidagi bo‘shliq.
  3. Border (Chegara): Elementning tashqi chegarasi.
  4. Margin (Tashqi oraliq): Element va uning atrofidagi boshqa elementlar o‘rtasidagi bo‘shliq.

Misol:​

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 15px;
}

Bu yerda:

  • width: 300px; — elementning kengligi 300px.
  • padding: 20px; — element ichidagi matn va chegaralar o‘rtasidagi bo‘shliq 20px.
  • border: 5px solid black; — element atrofida 5px qalinlikda qora chegara mavjud.
  • margin: 15px; — element atrofidagi boshqa elementlar bilan bo‘shliq 15px.

Background va Box Shadow​

Background:​

Background yordamida siz elementning fon rangini, rasmi yoki gradientini belgilashingiz mumkin. Bu sahifada vizual effektlar yaratish uchun juda foydali.

Misol:​

.box {
    background-color: lightblue;
}

Siz fonni rasm bilan ham almashtirishingiz mumkin:

.box {
    background-image: url('background.jpg');
    background-size: cover;
}

Box Shadow:​

Box-shadow yordamida elementga soyalar qo‘shishingiz mumkin. Bu effektlar sahifalarga chuqurlik va qiziqarli ko‘rinish beradi.

Misol:​

.box {
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
  • 10px - soyani gorizontal yo‘nalishda ko‘rsatilgan masofa.
  • 10px - soyani vertikal yo‘nalishda ko‘rsatilgan masofa.
  • 15px - soyani tarqatish radiusi.
  • rgba(0, 0, 0, 0.3) - soyani rangini va shaffofligini belgilaydi.

Pozitsiyalash (Positioning)​

CSSda elementlarni pozitsiyalashning bir nechta usullari mavjud. Har bir pozitsiya turli holatlarda qo‘llaniladi.

Pozitsiyalashning asosiy turlari:​

  1. Static — bu elementlarning standart pozitsiyasi. Elementlar odatda o‘z joyida turadi.
  2. Relative — element o‘zining o‘rni bilan joylashadi, ammo boshqa elementlar uchun yangi joy belgilash mumkin.
  3. Absolute — elementni o‘zi joylashadigan konteynerga nisbatan joylashtiradi.
  4. Fixed — sahifaning o‘rnatilgan joyida qoladi, ekranni scroll qilganingizda ham o‘zgarmaydi.
  5. Sticky — sahifa scroll qilinayotganda element yopishib turadi.

Misol:​

.container {
    position: relative;
}

.item {
    position: absolute;
    top: 20px;
    left: 30px;
}

Bu yerda item elementi container ga nisbatan 20px yuqorida va 30px chapda joylashadi.

z-index​

z-index CSSda elementlarning o‘zaro qatlamlashishini boshqaradi. Bu qiymatni o‘zgartirish orqali biz elementlarning bir-biriga nisbatan joylashuvini nazorat qila olamiz.

Misol:​

.box1 {
    position: absolute;
    z-index: 1;
    background-color: lightblue;
    width: 100px;
    height: 100px;
}

.box2 {
    position: absolute;
    z-index: 2;
    background-color: lightgreen;
    width: 100px;
    height: 100px;
}

Bu yerda box2 elementi box1 ustiga chiqadi, chunki z-index qiymati yuqori.

CSS Transition (O‘tishlar)​

CSS transition — bu elementning holatini sekin o‘zgartirish imkoniyatini beradi. Bu yordamida biz sahifadagi elementlarni animatsiyalar orqali interaktiv qilishimiz mumkin.

Misol:​

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transition: background-color 0.5s ease;
}

.box:hover {
    background-color: lightgreen;
}

Bu yerda box elementiga kursorni olib borganimizda, uning rangi sekin o‘zgara boshlaydi.

CSS Animations​

CSS Animations yordamida biz murakkab animatsiyalarni yaratishimiz mumkin. Bu yordamida sahifadagi elementlarga turli xil effektlar berish mumkin.

Misol:​

@keyframes example {
    0% { background-color: lightblue; }
    100% { background-color: lightgreen; }
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: example 2s infinite;
}

Bu yerda box elementi rangini 2 soniya davomida o‘zgartiradi va bu jarayon davom etaveradi.

Flexbox nima?​

Flexbox – bu CSSda mavjud bo‘lgan tizim bo‘lib, u yordamida bir nechta elementlarni gorizontal yoki vertikal tarzda joylashtirish, ular orasidagi masofani belgilash va joylashuvini o‘zgartirish mumkin. Flexbox tizimi asosida ishlash uchun, avvalo, konteyner elementiga display: flex xususiyatini berish kerak.

Flexboxda ikki asosiy tushuncha bor: flex container (konteyner) va flex item (element). Container – bu barcha elementlar joylashadigan asosiy konteyner, item esa uning ichidagi elementlar.

Misol:

.container {
  display: flex; /* Flexbox rejimiga o‘tish */
}

.item {
  flex: 1; /* Har bir element teng o‘lchamda bo‘ladi */
}

Bu yerda .container – bu flex konteyner, ichidagi .item elementlar teng o‘lchamda bo‘ladi.

Flexbox asosiy xususiyatlari​

Flexbox tizimi bir nechta asosiy xususiyatlarga ega, ular yordamida elementlarni joylashtirish va boshqarish mumkin:

flex-direction

flex-direction xususiyati flex elementlarini gorizontal yoki vertikal ravishda joylashtirishni boshqaradi. U quyidagi qiymatlarga ega:

  • row (default) – elementlar gorizontal ravishda joylashadi.
  • column – elementlar vertikal ravishda joylashadi.
  • row-reverse – elementlar gorizontal ravishda, lekin teskari tartibda joylashadi.
  • column-reverse – elementlar vertikal ravishda, lekin teskari tartibda joylashadi.

Misol:

.container {
  display: flex;
  flex-direction: row; /* Gorizontal joylashuv */
}

.item {
  margin: 5px;
}

justify-content

justify-content xususiyati flex konteynerdagi elementlar orasidagi bo‘shliqni boshqaradi va elementlarni konteyner bo‘ylab joylashtiradi. Quyidagi qiymatlar mavjud:

  • flex-start – elementlar konteynerning boshidan boshlanadi (default).
  • center – elementlar markazda joylashadi.
  • flex-end – elementlar konteynerning oxirida joylashadi.
  • space-between – elementlar orasida teng bo‘shliq bo‘ladi.
  • space-around – elementlar orasida teng bo‘shliq va hamda elementlar tashqi tomonda ham bo‘shliq bo‘ladi.

Misol:

.container {
  display: flex;
  justify-content: center; /* Markazlashtirish */
}

align-items

align-items xususiyati vertikal ravishda elementlarning joylashishini boshqaradi. Quyidagi qiymatlar mavjud:

  • stretch (default) – elementlar vertikal ravishda cho‘ziladi.
  • flex-start – elementlar yuqoriga joylashadi.
  • flex-end – elementlar pastga joylashadi.
  • center – elementlar markazga joylashadi.

Misol:

.container {
  display: flex;
  align-items: center; /* Vertikal markazlashtirish */
}

align-self

align-self xususiyati individual elementning vertikal joylashuvini boshqaradi. Bu align-items xususiyatining individual versiyasi.

Misol:

.item {
  align-self: flex-end; /* Elementni pastga joylashtirish */
}

Flexboxning zamonaviy dizayn imkoniyatlari​

Flexbox yordamida dizaynerlar har xil murakkab dizaynlarni yaratishlari mumkin. Flexboxdan foydalanib, veb-sahifada elementlarni markazlashtirish, ularning o‘lchamini sozlash, sahifani turli o‘lchamdagi ekranlarga moslashtirish juda oson.

Misol:

.container {
  display: flex;
  justify-content: space-between; /* Elementlar orasida teng bo'shliq */
  align-items: center; /* Vertikal markazlashtirish */
}

Bu kod yordamida sahifadagi elementlarni gorizontal ravishda teng bo’shliq bilan joylashtirish va vertikal markazlashtirish mumkin.

Misollar​

Misol 1: Oddiy Flexbox Layout

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  background-color: lightgreen;
  padding: 20px;
}

HTML:

<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>

Bu misolda, 3 ta element gorizontal ravishda joylashadi va ularning orasida teng bo‘shliq bo‘ladi, hamda elementlar vertikal ravishda markazda joylashadi.

CSS Grid nima?​

CSS Grid - bu CSS xususiyati bo‘lib, elementlarni ikki o‘lchovli grid (katakli) tizimida joylashtirishga imkon beradi. Bu tizim yordamida siz kontentni gorizontal va vertikal ravishda boshqarishingiz mumkin.

Grid tizimi ikkita asosiy qismdan iborat: container (konteyner) va item (element). Container – bu grid tizimi uchun joy ajratadigan element, item esa bu joyni egallovchi individual elementlar.

Misol: Agar biz sahifani 3 ustunli va 2 qatorli grid bilan tuzmoqchi bo‘lsak, quyidagi tarzda yozamiz:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 ustun */
  grid-template-rows: 1fr 1fr; /* 2 qator */
}

Bu kod yordamida biz 3 ta teng ustun va 2 ta teng qatorli grid tizimini yaratamiz. 1fr - bu "fractional unit" (foizli birlik), ya'ni gridni teng qismlarga bo‘lish uchun ishlatiladi.

Gridning asosiy xususiyatlari​

grid-template-columns va grid-template-rows

  • grid-template-columns – gridning ustunlarini belgilash.
  • grid-template-rows – gridning qatorlarini belgilash.

Misol:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* 3 ustun */
  grid-template-rows: 100px auto 150px; /* 3 qator */
}

Bu kodda, birinchi ustun 200px, ikkinchi ustun qoldiq joyni oladi (1fr), va uchinchi ustun ikki marta ko‘proq joy oladi (2fr). Qatorlar esa 100px, avtomatik o‘lchov va 150px bo‘ladi.

grid-gap

Grid tizimida ustunlar va qatorlar orasidagi bo‘shliqni sozlash uchun grid-gap xususiyatidan foydalanamiz.

Misol:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px; /* Ustunlar va qatorlar orasidagi bo‘shliq */
}

Bu yerda grid-gap ustunlar va qatorlar orasidagi masofani 10px qiladi.

grid-column va grid-row

Grid elementlarini joylashtirishda, ularni qaysi ustun yoki qatorga joylashtirishni belgilash uchun grid-column va grid-row xususiyatlaridan foydalaniladi.

Misol:

.item {
  grid-column: 1 / 3; /* 1-ustundan 3-ustungacha */
  grid-row: 2 / 4; /* 2-qator dan 4-qatorgacha */
}

Bu kodda, .item elementi 1-ustundan 3-ustungacha va 2-qatoridan 4-qatorigacha cho‘ziladi.

Misollar​

Misol 1: Oddiy Grid layout

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.item {
  background-color: lightblue;
  padding: 20px;
}

HTML:

<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>

Bu misolda, sahifada 3 ta ustunli grid tashkil qilinadi va elementlar orasida 20px bo‘shliq bo‘ladi.

Responsiv dizayn​

Responsive design — bu veb-sahifaning har xil ekran o‘lchamlarida to‘g‘ri ko‘rinishini ta'minlash hisoblanadi. Bu bilan biz sahifani mobil telefonlar, planshetlar va kompyuterlar uchun optimallashtiramiz.

Misol:​

@media (max-width: 768px) {
    .container {
        display: block;
    }
}

Bu yerda, agar ekran kengligi 768px dan kichik bo‘lsa, .container elementi blok tarzida joylashadi.

Xulosa​

Bugungi darsda biz CSS ning asoslarini o‘rganib chiqdik. Endi siz HTML elementlarini qanday bezashni, ranglarni qanday o‘rnatishni, matnni qanday o‘lchashni, box model, background, box shadow, pozitsiyalash, z-index, transition (o’tishlar), animatsiyalar, flexbox, grid, media so’rovlarni ko’rib chiqdik. Endilikda o’rgangan HTML vs CSS bilimlarimiz orqali xilma-xil web sahifalarni yaratishimiz mumkin.